<!Doctype html>
<html lang="zh-cmn-Hans">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <title>静态网页开发学习平台</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="一个简洁、方便、快速、好用、灵活的静态网页开发技术的学习平台。">
  <meta name="keywords" content="静态网页开发，学习平台">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
    integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

  <!-- font-awesome CSS -->
  <link rel="stylesheet" href="css/font-awesome.min.css">

  <!-- User defined CSS -->
  <link rel="stylesheet" href="css/style.css">

</head>

<body>
  <header class="fixed-top">
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark shadow p-3">

      <!-- Brand -->
      <a class="navbar-brand ml-5" href="#">静态网页开发学习平台</a>

      <!-- Navbar links -->
      <div class="collapse navbar-collapse d-flex flex-row justify-content-end mr-5" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item ml-5 active">
            <a class="nav-link" href="#">首页</a>
          </li>
          <li class="nav-item ml-5">
            <a class="nav-link" href="html/teach-video.html">教学视频</a>
          </li>
          <li class="nav-item ml-5">
            <a class="nav-link" href="html/works-display.html">优秀作品</a>
          </li>
          <li class="nav-item ml-5">
            <a class="nav-link" href="html/my-profile.html">个人中心</a>
          </li>
        </ul>
      </div>
    </nav>
  </header>

  <!-- Picture carousel -->
  <section id="picture-carousel">
    <div id="carouselIndicators" class="carousel slide" data-ride="carousel">
      <ol class="carousel-indicators">
        <li data-target="#carouselIndicators" data-slide-to="0" class="active"></li>
        <li data-target="#carouselIndicators" data-slide-to="1"></li>
        <li data-target="#carouselIndicators" data-slide-to="2"></li>
        <li data-target="#carouselIndicators" data-slide-to="3"></li>
      </ol>
      <div class="carousel-inner">
        <div class="carousel-item active" data-interval="3000">
          <a href="http://www.bootcss.com/" target="_blank" rel="noopener noreferrer"><img
              src="img/carouselPicture/carousel-bootstrap1.jpg" class="d-block w-100 img-fluid" alt="bootstrap1"></a>
        </div>
        <div class="carousel-item" data-interval="3000">
          <a href="https://v2.bootcss.com/" target="_blank" rel="noopener noreferrer"><img
              src="img/carouselPicture/carousel-bootstrap2.jpg" class="d-block w-100 img-fluid" alt="bootstrap2"></a>
        </div>
        <div class="carousel-item" data-interval="3000">
          <a href="https://v3.bootcss.com/" target="_blank" rel="noopener noreferrer"><img
              src="img/carouselPicture/carousel-bootstrap3.jpg" class="d-block w-100 img-fluid" alt="bootstrap3"></a>
        </div>
        <div class="carousel-item" data-interval="3000">
          <a href="https://v4.bootcss.com/" target="_blank" rel="noopener noreferrer"><img
              src="img/carouselPicture/carousel-bootstrap4.jpg" class="d-block w-100 img-fluid" alt="bootstrap4"></a>
        </div>
      </div>
      <a class="carousel-control-prev" href="#carouselIndicators" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="carousel-control-next" href="#carouselIndicators" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
  </section>

  <!-- Teach video -->
  <section class="mt-5" id="teach-video">
    <div class="d-flex justify-content-between mb-1">
      <h2 class="h2">教学视频学习<i class="icon-play-circle ml-2"></i></h2>
      <a class="text-muted text-decoration-none" href="html/teach-video.html">更多<i
          class="icon-double-angle-right ml-1"></i></a>
    </div>

    <div class="card-deck">
      <div class="card">
        <a href="https://www.imooc.com/learn/931" target="_blank" rel="noopener noreferrer"><img class="card-img-top"
            src="img/teachVideo/teach-css定位position.png" title="css定位position" alt="未找到图片信息"></a>
        <div class="card-body">
          <a class="text-dark" href="https://www.imooc.com/learn/931" target="_blank" rel="noopener noreferrer">
            <h5 class="card-title">CSS定位position</h5>
          </a>
          <p class="card-text text-muted">本课程，将带领大家了解一下定位的知识，教大家如何通过定位来进行布局。</p>
        </div>
        <div class="card-footer">
          <small class="d-flex justify-content-around">
            <a class="text-muted text-decoration-none mr-1" href="#" title="基础"><span
                class="badge badge-pill badge-info">基础</span></a>
            <a class="text-muted text-decoration-none mr-1" href="#" title="拉取"><i
                class="icon-stethoscope icon-large mr-1"></i>3.2k</a>
            <a class="text-muted text-decoration-none mr-1" href="#" title="点赞"><i
                class="icon-star icon-large mr-1"></i>4.5k</a>
          </small>
        </div>
      </div>
      <div class="card">
        <a href="https://www.imooc.com/learn/755" target="_blank" rel="noopener noreferrer"><img class="card-img-top"
            src="img/teachVideo/teach-CSS深入理解之border.png" title="CSS深入理解之border" alt="未找到图片信息"></a>
        <div class="card-body">
          <a class="text-dark" href="https://www.imooc.com/learn/755" target="_blank" rel="noopener noreferrer">
            <h5 class="card-title">CSS深入理解之border</h5>
          </a>
          <p class="card-text text-muted">
            本课程将深入讲解CSS中的border属性，深入介绍border-color之间的关系，以及border与background定位、border与透明边框，并教你如果使用border进行图形构建，以及如何借助border使用有限标签完成我们的布局。
          </p>
        </div>
        <div class="card-footer">
          <small class="d-flex justify-content-around">
            <a class="text-muted text-decoration-none mr-1" href="#" title="基础"><span
                class="badge badge-pill badge-info">基础</span></a>
            <a class="text-muted text-decoration-none mr-1" href="#" title="拉取"><i
                class="icon-stethoscope icon-large mr-1"></i>3.2k</a>
            <a class="text-muted text-decoration-none mr-1" href="#" title="点赞"><i
                class="icon-star icon-large mr-1"></i>4.5k</a>
          </small>
        </div>
      </div>
      <div class="card">
        <a href="https://www.imooc.com/learn/33" target="_blank" rel="noopener noreferrer"><img class="card-img-top"
            src="img/teachVideo/teach-十天精通CSS3.png" title="十天精通CSS3" alt="未找到图片信息"></a>
        <div class="card-body">
          <a class="text-dark" href="https://www.imooc.com/learn/33" target="_blank" rel="noopener noreferrer">
            <h5 class="card-title">十天精通CSS3</h5>
          </a>
          <p class="card-text text-muted">
            本课程为CSS3教程，对于有一定CSS2经验的伙伴，能让您系统的学习CSS3，快速的理解掌握并应用于工作之中。在学习教程的过程中实例演示结合在线编程完成任务的方式来学习，相信自己动手会让你理解的更快，本教程能够让您学习效果更好！
          </p>
        </div>
        <div class="card-footer">
          <small class="d-flex justify-content-around">
            <a class="text-muted text-decoration-none mr-1" href="#" title="基础"><span
                class="badge badge-pill badge-info">基础</span></a>
            <a class="text-muted text-decoration-none mr-1" href="#" title="拉取"><i
                class="icon-stethoscope icon-large mr-1"></i>3.2k</a>
            <a class="text-muted text-decoration-none mr-1" href="#" title="点赞"><i
                class="icon-star icon-large mr-1"></i>4.5k</a>
          </small>
        </div>
      </div>
      <div class="card">
        <a href="https://www.imooc.com/learn/9" target="_blank" rel="noopener noreferrer"><img class="card-img-top"
            src="img/teachVideo/teach-HTML+CSS基础课程.png" title="HTML+CSS基础课程" alt="未找到图片信息"></a>
        <div class="card-body">
          <a class="text-dark" href="https://www.imooc.com/learn/9" target="_blank" rel="noopener noreferrer">
            <h5 class="card-title">HTML+CSS基础课程</h5>
          </a>
          <p class="card-text text-muted">
            本课程从最基本的概念开始讲起，步步深入，带领大家学习HTML、CSS样式基础知识，了解各种常用标签的意义以及基本用法，后半部分教程主要讲解CSS样式代码添加，为后面的案例课程打下基础。</p>
        </div>
        <div class="card-footer">
          <small class="d-flex justify-content-around">
            <a class="text-muted text-decoration-none mr-1" href="#" title="基础"><span
                class="badge badge-pill badge-info">基础</span></a>
            <a class="text-muted text-decoration-none mr-1" href="#" title="拉取"><i
                class="icon-stethoscope icon-large mr-1"></i>3.2k</a>
            <a class="text-muted text-decoration-none mr-1" href="#" title="点赞"><i
                class="icon-star icon-large mr-1"></i>4.5k</a>
          </small>
        </div>
      </div>
    </div>
  </section>

  <!-- Works display -->
  <section class="mt-5" id="works-display">
    <div class="d-flex justify-content-between mb-1">
      <h2 class="h2">优秀作品欣赏<i class="icon-h-sign ml-2"></i></h2>
      <a class="text-muted text-decoration-none" href="html/works-display.html">更多<i
          class="icon-double-angle-right ml-1"></i></a>
    </div>

    <div class="card-deck">
      <div class="card">
        <a href="http://dropr.com/" target="_blank" rel="noopener noreferrer"><img class="card-img-top"
            src="img/worksDisplay/works-droprcom.png" title="Dropr" alt="未找到图片信息"></a>
        <div class="card-body">
          <a class="text-dark" href="http://dropr.com/" target="_blank" rel="noopener noreferrer">
            <h5 class="card-title">Dropr</h5>
          </a>
          <p class="card-text text-muted">一个很不错的作品</p>
        </div>
        <div class="card-footer">
          <small class="d-flex justify-content-around">
            <a class="text-muted text-decoration-none mr-1" href="#" title="拉取"><i
                class="icon-stethoscope icon-large mr-1"></i>3.2k</a>
            <a class="text-muted text-decoration-none mr-1" href="#" title="点赞"><i
                class="icon-star icon-large mr-1"></i>4.5k</a>
          </small>
        </div>
      </div>
      <div class="card">
        <a href="http://www.dascolabarbers.com/" target="_blank" rel="noopener noreferrer"><img class="card-img-top"
            src="img/worksDisplay/works-dascolabarbers.png" title="CSS深入理解之border" alt="未找到图片信息"></a>
        <div class="card-body">
          <a class="text-dark" href="http://www.dascolabarbers.com/" target="_blank" rel="noopener noreferrer">
            <h5 class="card-title">Dascola Barbers</h5>
          </a>
          <p class="card-text text-muted">一个很不错的作品</p>
        </div>
        <div class="card-footer">
          <small class="d-flex justify-content-around">
            <a class="text-muted text-decoration-none mr-1" href="#" title="拉取"><i
                class="icon-stethoscope icon-large mr-1"></i>3.2k</a>
            <a class="text-muted text-decoration-none mr-1" href="#" title="点赞"><i
                class="icon-star icon-large mr-1"></i>4.5k</a>
          </small>
        </div>
      </div>
      <div class="card">
        <a href="https://www.kevadamson.com/" target="_blank" rel="noopener noreferrer"><img class="card-img-top"
            src="img/worksDisplay/works-kevadamsoncom.png" title="Kev Adamson" alt="未找到图片信息"></a>
        <div class="card-body">
          <a class="text-dark" href="https://www.kevadamson.com/" target="_blank" rel="noopener noreferrer">
            <h5 class="card-title">Kev Adamson</h5>
          </a>
          <p class="card-text text-muted">一个很不错的作品</p>
        </div>
        <div class="card-footer">
          <small class="d-flex justify-content-around">
            <a class="text-muted text-decoration-none mr-1" href="#" title="拉取"><i
                class="icon-stethoscope icon-large mr-1"></i>3.2k</a>
            <a class="text-muted text-decoration-none mr-1" href="#" title="点赞"><i
                class="icon-star icon-large mr-1"></i>4.5k</a>
          </small>
        </div>
      </div>
      <div class="card">
        <a href="https://www.artattackk.com/" target="_blank" rel="noopener noreferrer"><img class="card-img-top"
            src="img/worksDisplay/works-artattackk.png" title="Art Attackk" alt="未找到图片信息"></a>
        <div class="card-body">
          <a class="text-dark" href="https://www.artattackk.com/" target="_blank" rel="noopener noreferrer">
            <h5 class="card-title">Art Attackk</h5>
          </a>
          <p class="card-text text-muted">一个很不错的作品</p>
        </div>
        <div class="card-footer">
          <small class="d-flex justify-content-around">
            <a class="text-muted text-decoration-none mr-1" href="#" title="拉取"><i
                class="icon-stethoscope icon-large mr-1"></i>3.2k</a>
            <a class="text-muted text-decoration-none mr-1" href="#" title="点赞"><i
                class="icon-star icon-large mr-1"></i>4.5k</a>
          </small>
        </div>
      </div>
    </div>
  </section>

  <!-- Some recommendations -->
  <section class="mt-5" id="some-recommendations">
    <h2 class="h2 d-flex mb-2">学习专区&技术干货&实用工具</h2>
    <div class="d-flex justify-content-around no-gutters">
      <!-- 学习专区 -->
      <ul class="list-group col-4 pr-4">
        <li class="list-group-item list-group-item-primary text-center">
          <h5>学习专区<i class="icon-laptop ml-2"></i></h5>
        </li>
        <li class="list-group-item d-flex flex-column justify-content-between align-items-left">
          <div class="d-flex justify-content-between">
            <h5 class="mb-1"><a class="text-dark" href="https://getbootstrap.com/" target="_blank"
                rel="noopener noreferrer">Bootstrap</a></h5>
            <small><i class="icon-fire mr-1"></i>2.5k</small>
          </div>
          <p class="mb-1 text-muted">一个用于使用HTML，CSS和JS进行开发的开源工具包。</p>
        </li>
        <li class="list-group-item d-flex flex-column justify-content-between align-items-left">
          <div class="d-flex justify-content-between">
            <h5 class="mb-1"><a class="text-dark" href="http://www.bootcss.com/" target="_blank"
                rel="noopener noreferrer">Bootstrap中文网</a></h5>
            <small><i class="icon-fire mr-1"></i>1.8k</small>
          </div>
          <p class="mb-1 text-muted">致力于为广大开发者提供更多的优质技术文档和辅助开发工具！</p>
        </li>
        <li class="list-group-item d-flex flex-column justify-content-between align-items-left">
          <div class="d-flex justify-content-between">
            <h5 class="mb-1"><a class="text-dark" href="https://code.z01.com/v4/" target="_blank"
                rel="noopener noreferrer">BootStrap及相关开发文档</a></h5>
            <small><i class="icon-fire mr-1"></i>1.8k</small>
          </div>
          <p class="mb-1 text-muted">BootStrap中国-逐浪CMS引领网站开发新潮流</p>
        </li>
        <li class="list-group-item d-flex flex-column justify-content-between align-items-left">
          <div class="d-flex justify-content-between">
            <h5 class="mb-1"><a class="text-dark" href="http://www.runoob.com/" target="_blank"
                rel="noopener noreferrer">菜鸟教程</a></h5>
            <small><i class="icon-fire mr-1"></i>7.8k</small>
          </div>
          <p class="mb-1 text-muted">菜鸟教程 - 学的不仅是技术，更是梦想！</p>
        </li>
        <li class="list-group-item d-flex flex-column justify-content-between align-items-left">
          <div class="d-flex w-100 justify-content-between">
            <h5 class="mb-1"><a class="text-dark" href="http://www.w3school.com.cn/" target="_blank"
                rel="noopener noreferrer">w3school 在线教程</a></h5>
            <small><i class="icon-fire mr-1"></i>2.5k</small>
          </div>
          <p class="mb-1 text-muted">全球最大的中文 Web 技术教程。</p>
        </li>
        <li class="list-group-item d-flex flex-column justify-content-between align-items-left">
          <div class="d-flex w-100 justify-content-between">
            <h5 class="mb-1"><a class="text-dark" href="https://www.layui.com/" target="_blank"
                rel="noopener noreferrer">Layui</a></h5>
            <small><i class="icon-fire mr-1"></i>4.6k</small>
          </div>
          <p class="mb-1 text-muted">经典模块化前端框架</p>
        </li>
        <li class="list-group-item d-flex flex-column justify-content-between align-items-left">
          <div class="d-flex w-100 justify-content-between">
            <h5 class="mb-1"><a class="text-dark" href="https://cn.vuejs.org/" target="_blank"
                rel="noopener noreferrer">Vue.js</a></h5>
            <small><i class="icon-fire mr-1"></i>2.5k</small>
          </div>
          <p class="mb-1 text-muted">渐进式JavaScript 框架</p>
        </li>
        <li class="list-group-item d-flex flex-column justify-content-between align-items-left">
          <div class="d-flex w-100 justify-content-between">
            <h5 class="mb-1"><a class="text-dark" href="https://alibaba.github.io/ice" target="_blank"
                rel="noopener noreferrer">飞冰</a></h5>
            <small><i class="icon-fire mr-1"></i>2.5k</small>
          </div>
          <p class="mb-1 text-muted">让前端开发简单而友好</p>
        </li>
        <li class="list-group-item d-flex flex-column justify-content-between align-items-left">
          <div class="d-flex w-100 justify-content-between">
            <h5 class="mb-1"><a class="text-dark" href="http://electronjs.org/" target="_blank"
                rel="noopener noreferrer">Electron </a></h5>
            <small><i class="icon-fire mr-1"></i>3.6k</small>
          </div>
          <p class="mb-1 text-muted">使用 JavaScript, HTML 和 CSS 构建跨平台的桌面应用</p>
        </li>
        <li class="list-group-item d-flex flex-column justify-content-between align-items-left">
          <div class="d-flex w-100 justify-content-between">
            <h5 class="mb-1"><a class="text-dark" href="https://cmljs.org/#/" target="_blank"
                rel="noopener noreferrer">Chameleon</a></h5>
            <small><i class="icon-fire mr-1"></i>4.6k</small>
          </div>
          <p class="mb-1 text-muted">一套代码运行多端，一端所见即多端所见</p>
        </li>
        <li class="list-group-item d-flex flex-column justify-content-between align-items-left">
          <div class="d-flex w-100 justify-content-between">
            <h5 class="mb-1"><a class="text-dark" href="https://react.docschina.org/" target="_blank"
                rel="noopener noreferrer">React中文文档</a></h5>
            <small><i class="icon-fire mr-1"></i>2.5k</small>
          </div>
          <p class="mb-1 text-muted">用于构建用户界面的 JavaScript 库</p>
        </li>
      </ul>
      <!-- 技术干货 -->
      <ul class="list-group col-4">
        <li class="list-group-item list-group-item-primary text-center">
          <h5>技术干货<i class="icon-magic ml-2"></i></h5>
        </li>
        <li class="list-group-item d-flex flex-column justify-content-between align-items-left">
          <div class="d-flex w-100 justify-content-between">
            <h5 class="mb-1"><a class="text-dark" href="https://www.yuque.com/fe9/basic" target="_blank"
                rel="noopener noreferrer">前端九部 - 入门者手册2019</a></h5>
            <small><i class="icon-eye-open mr-1"></i>2.5k</small>
          </div>
          <p class="mb-1 text-muted">九部成员合著的web前端开发零基础入门手册</p>
        </li>
        <li class="list-group-item d-flex flex-column justify-content-between align-items-left">
          <div class="d-flex w-100 justify-content-between">
            <h5 class="mb-1"><a class="text-dark" href="https://codeguide.bootcss.com/" target="_blank"
                rel="noopener noreferrer">编码规范</a></h5>
            <small><i class="icon-eye-open mr-1"></i>2.5k</small>
          </div>
          <p class="mb-1 text-muted">编写灵活、稳定、高质量的 HTML 和 CSS 代码的规范。</p>
        </li>
        <li class="list-group-item d-flex flex-column justify-content-between align-items-left">
          <div class="d-flex w-100 justify-content-between">
            <h5 class="mb-1"><a class="text-dark" href="http://www.bootcss.com/p/font-awesome/#" target="_blank"
                rel="noopener noreferrer">Font Awesome</a></h5>
            <small><i class="icon-eye-open mr-1"></i>2.5k</small>
          </div>
          <p class="mb-1 text-muted">完美的图标字体,只为Bootstrap设计</p>
        </li>
        <li class="list-group-item d-flex flex-column justify-content-between align-items-left">
          <div class="d-flex w-100 justify-content-between">
            <h5 class="mb-1"><a class="text-dark" href="http://www.bootcss.com/p/flat-ui/" target="_blank"
                rel="noopener noreferrer">Flat UI</a></h5>
            <small><i class="icon-eye-open mr-1"></i>3.6k</small>
          </div>
          <p class="mb-1 text-muted">免费的WEB界面工具组件库</p>
        </li>
        <li class="list-group-item d-flex flex-column justify-content-between align-items-left">
          <div class="d-flex w-100 justify-content-between">
            <h5 class="mb-1"><a class="text-dark" href="https://daneden.github.io/animate.css/" target="_blank"
                rel="noopener noreferrer">Animate.css</a></h5>
            <small><i class="icon-eye-open mr-1"></i>2.5k</small>
          </div>
          <p class="mb-1 text-muted">一款强大的预设css3动画库</p>
        </li>
        <li class="list-group-item d-flex flex-column justify-content-between align-items-left">
          <div class="d-flex w-100 justify-content-between">
            <h5 class="mb-1"><a class="text-dark" href="http://www.bootcss.com/p/websafecolors/" target="_blank"
                rel="noopener noreferrer">WEB安全色</a></h5>
            <small><i class="icon-eye-open mr-1"></i>2.5k</small>
          </div>
          <p class="mb-1 text-muted">为那些喜欢简单的人创建的。</p>
        </li>
        <li class="list-group-item d-flex flex-column justify-content-between align-items-left">
          <div class="d-flex w-100 justify-content-between">
            <h5 class="mb-1"><a class="text-dark" href="https://codepen.io/" target="_blank"
                rel="noopener noreferrer">CodePen</a></h5>
            <small><i class="icon-eye-open mr-1"></i>2.5k</small>
          </div>
          <p class="mb-1 text-muted">面向前端设计人员和开发人员的社交开发环境。</p>
        </li>
        <li class="list-group-item d-flex flex-column justify-content-between align-items-left">
          <div class="d-flex w-100 justify-content-between">
            <h5 class="mb-1"><a class="text-dark" href="https://www.html.cn/tool/css3Preview/" target="_blank"
                rel="noopener noreferrer">CSS3样式生成器-Css3演示</a></h5>
            <small><i class="icon-eye-open mr-1"></i>2.5k</small>
          </div>
          <p class="mb-1 text-muted">CSS3样式生成器-Css3演示</p>
        </li>
        <li class="list-group-item d-flex flex-column justify-content-between align-items-left">
          <div class="d-flex w-100 justify-content-between">
            <h5 class="mb-1"><a class="text-dark" href="http://css.doyoe.com/" target="_blank"
                rel="noopener noreferrer">CSS参考手册</a></h5>
            <small><i class="icon-eye-open mr-1"></i>2.5k</small>
          </div>
          <p class="mb-1 text-muted">web前端开发参考手册系列</p>
        </li>
        <li class="list-group-item d-flex flex-column justify-content-between align-items-left">
          <div class="d-flex w-100 justify-content-between">
            <h5 class="mb-1"><a class="text-dark" href="https://octicons.github.com/" target="_blank"
                rel="noopener noreferrer">Octicons</a></h5>
            <small><i class="icon-eye-open mr-1"></i>2.5k</small>
          </div>
          <p class="mb-1 text-muted">Your project. GitHub's icons.</p>
        </li>
        <li class="list-group-item d-flex flex-column justify-content-between align-items-left">
          <div class="d-flex w-100 justify-content-between">
            <h5 class="mb-1"><a class="text-dark" href="https://material.io/" target="_blank"
                rel="noopener noreferrer">Material</a></h5>
            <small><i class="icon-eye-open mr-1"></i>2.5k</small>
          </div>
          <p class="mb-1 text-muted">更快地打造漂亮的产品。</p>
        </li>
      </ul>
      <!-- 实用工具 -->
      <ul class="list-group col-4 pl-4">
        <li class="list-group-item list-group-item-primary text-center">
          <h5>实用工具<i class="icon-wrench ml-2"></i></h5>
        </li>
        <li class="list-group-item d-flex flex-column justify-content-between align-items-left">
          <div class="d-flex w-100 justify-content-between">
            <h5 class="mb-1"><a class="text-dark" href="https://code.visualstudio.com/" target="_blank"
                rel="noopener noreferrer">Visual Studio Code</a></h5>
            <small><i class="icon-download-alt mr-1"></i>2.5k</small>
          </div>
          <p class="mb-1 text-muted">代码编辑,重新定义,免费,开源,到处运行。</p>
        </li>
        <li class="list-group-item d-flex flex-column justify-content-between align-items-left">
          <div class="d-flex w-100 justify-content-between">
            <h5 class="mb-1"><a class="text-dark" href="http://www.sublimetext.com/" target="_blank"
                rel="noopener noreferrer">Sublime Text</a></h5>
            <small><i class="icon-download-alt mr-1"></i>8.9k</small>
          </div>
          <p class="mb-1 text-muted">用于代码,标记和散文的复杂文本编辑器</p>
        </li>
        <li class="list-group-item d-flex flex-column justify-content-between align-items-left">
          <div class="d-flex w-100 justify-content-between">
            <h5 class="mb-1"><a class="text-dark" href="https://atom.io/" target="_blank"
                rel="noopener noreferrer">Atom</a></h5>
            <small><i class="icon-download-alt mr-1"></i>2.5k</small>
          </div>
          <p class="mb-1 text-muted">21世纪的黑客文本编辑器</p>
        </li>
        <li class="list-group-item d-flex flex-column justify-content-between align-items-left">
          <div class="d-flex w-100 justify-content-between">
            <h5 class="mb-1"><a class="text-dark" href="http://www.jetbrains.com/webstorm/" target="_blank"
                rel="noopener noreferrer">WebStorm</a></h5>
            <small><i class="icon-download-alt mr-1"></i>2.5k</small>
          </div>
          <p class="mb-1 text-muted">最聪明的JavaScript IDE</p>
        </li>
        <li class="list-group-item d-flex flex-column justify-content-between align-items-left">
          <div class="d-flex w-100 justify-content-between">
            <h5 class="mb-1"><a class="text-dark" href="https://www.adobe.com/cn/products/dreamweaver.html"
                target="_blank" rel="noopener noreferrer">Dreamweaver</a></h5>
            <small><i class="icon-download-alt mr-1"></i>2.5k</small>
          </div>
          <p class="mb-1 text-muted">制作适用于多种浏览器或设备的精美网站。</p>
        </li>
        <li class="list-group-item d-flex flex-column justify-content-between align-items-left">
          <div class="d-flex w-100 justify-content-between">
            <h5 class="mb-1"><a class="text-dark" href="https://notepad-plus-plus.org/" target="_blank"
                rel="noopener noreferrer">Notepad++</a></h5>
            <small><i class="icon-download-alt mr-1"></i>2.5k</small>
          </div>
          <p class="mb-1 text-muted">一个免费的源代码编辑器和支持多种语言的记事本替换。</p>
        </li>
        <li class="list-group-item d-flex flex-column justify-content-between align-items-left">
          <div class="d-flex w-100 justify-content-between">
            <h5 class="mb-1"><a class="text-dark" href="http://www.dcloud.io/hbuilderx.html" target="_blank"
                rel="noopener noreferrer">HBuilderX</a></h5>
            <small><i class="icon-download-alt mr-1"></i>2.5k</small>
          </div>
          <p class="mb-1 text-muted">是轻如编辑器、强如IDE的合体版本</p>
        </li>
        <li class="list-group-item d-flex flex-column justify-content-between align-items-left">
          <div class="d-flex w-100 justify-content-between">
            <h5 class="mb-1"><a class="text-dark" href="https://zh.snipaste.com/" target="_blank"
                rel="noopener noreferrer">Snipaste</a></h5>
            <small><i class="icon-download-alt mr-1"></i>2.5k</small>
          </div>
          <p class="mb-1 text-muted">一个简单但强大的截图工具</p>
        </li>
        <li class="list-group-item d-flex flex-column justify-content-between align-items-left">
          <div class="d-flex w-100 justify-content-between">
            <h5 class="mb-1"><a class="text-dark" href="https://pc.qq.com/detail/18/detail_21258.html" target="_blank"
                rel="noopener noreferrer">Google Chrome下载</a></h5>
            <small><i class="icon-download-alt mr-1"></i>2.5k</small>
          </div>
          <p class="mb-1 text-muted">一款快速、安全且免费的网络浏览器</p>
        </li>
        <li class="list-group-item d-flex flex-column justify-content-between align-items-left">
          <div class="d-flex w-100 justify-content-between">
            <h5 class="mb-1"><a class="text-dark" href="http://www.firefox.com.cn/" target="_blank"
                rel="noopener noreferrer">Firefox</a></h5>
            <small><i class="icon-download-alt mr-1"></i>2.5k</small>
          </div>
          <p class="mb-1 text-muted">快，只为更好。</p>
        </li>
        <li class="list-group-item d-flex flex-column justify-content-between align-items-left">
          <div class="d-flex w-100 justify-content-between">
            <h5 class="mb-1"><a class="text-dark" href="http://xiazai.zol.com.cn/detail/15/146785.shtml" target="_blank"
                rel="noopener noreferrer">Photoshop CS6下载</a></h5>
            <small><i class="icon-download-alt mr-1"></i>2.5k</small>
          </div>
          <p class="mb-1 text-muted">Adobe公司旗下最为出名的图像处理软件之一</p>
        </li>
      </ul>
    </div>
  </section>

  <!-- Friendship link -->
  <section class="mt-5" id="friendship-link">
    <h2 class="h2 d-inline-flex mb-1">友情链接<i class="icon-bookmark ml-2 mt-1"></i></h2>
    <div class="d-flex justify-content-around offset-2">
      <ul class="list-group">
        <li class="list-group-item"><a class="text-dark" href="https://github.com/" target="_blank"
            rel="noopener noreferrer">GitHub</a></li>
        <li class="list-group-item"><a class="text-dark" href="https://www.swiper.com.cn/" target="_blank"
            rel="noopener noreferrer">Swiper</a></li>
        <li class="list-group-item"><a class="text-dark" href="http://www.akuziti.com/" target="_blank"
            rel="noopener noreferrer">艺术字体在线生成器</a></li>
        <li class="list-group-item"><a class="text-dark" href="https://m.fontke.com/tool/rgb/600fc4/" target="_blank"
            rel="noopener noreferrer">颜色搭配查询</a></li>
      </ul>
      <ul class="list-group">
        <li class="list-group-item"><a class="text-dark" href="https://www.quanzhanketang.com/" target="_blank"
            rel="noopener noreferrer">w3schools</a></li>
        <li class="list-group-item"><a class="text-dark" href="https://www.html.cn/" target="_blank"
            rel="noopener noreferrer">HTML中文网</a></li>
        <li class="list-group-item"><a class="text-dark" href="http://www.lvyestudy.com/" target="_blank"
            rel="noopener noreferrer">绿叶学习网</a></li>
        <li class="list-group-item"><a class="text-dark" href="https://www.sasscss.com/" target="_blank"
            rel="noopener noreferrer">SASS中文网</a></li>
      </ul>
      <ul class="list-group">
        <li class="list-group-item"><a class="text-dark" href="http://www.bootcss.com/p/lesscss/" target="_blank"
            rel="noopener noreferrer">LESS</a></li>
        <li class="list-group-item"><a class="text-dark" href="https://www.imooc.com/" target="_blank"
            rel="noopener noreferrer">慕课网</a></li>
        <li class="list-group-item"><a class="text-dark" href="http://www.icourses.cn/home/" target="_blank"
            rel="noopener noreferrer">爱课程</a></li>
        <li class="list-group-item"><a class="text-dark" href="https://www.w3cschool.cn/" target="_blank"
            rel="noopener noreferrer">W3Cshool</a></li>
      </ul>
    </div>
  </section>

  <footer class="fix-bottom mt-3">
    <div class="jumbotron jumbotron-fluid">
      <div class="container text-center">
        <p>Copyright&copy;2019-4-7 by 乐小猿 版本号：3.0</p>
        <p>本平台内容来自互联网，如内容有侵权，请联系本人删除。&nbsp;&nbsp;<a href="http://www.beian.miit.gov.cn/">鄂ICP备18020158号</a></p>
        <p>联系电话：15897677961 QQ：2775886918 微信：15897677961</p>
      </div>
    </div>
  </footer>

  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"
    integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
    crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
    integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
    crossorigin="anonymous"></script>
</body>

</html>